<template>
  <div class="show-order">
    <div class="show-heading">
      订单查看
    </div>
    <div class="show-context">
        <div class="show-group">
          <div class="show-group-item item-top">
            <span class="item-number">编号:{{order.serialNumber}}</span>
            <button v-show="order.state === '等待付款'" class="goback-button" @click="deleteAddress">取消订单</button>
            <button v-show="order.state === '已付款' || order.state === '已发货'" class="goback-button" @click="deleteAddress">退款</button>
          </div>
          <div class="show-group-item">
            <h5 :class="order.state === '等待付款'?'item-text text-orange':'item-text'">{{ order.state }}</h5>
            <p>{{order.message}}</p>
          </div>
          <div class="show-group-item">
            <div class="item-information">
              <dl :style="order.state === '等待付款'?'height: 150px;':'height:120px'">
                <dt>订单信息</dt>
                <dd>
                  创建日期:<span class="item-text" style="margin-left: 10px">{{order.time}}</span>
                </dd>
                <dd>
                  支付方式:<span class="item-text" style="margin-left: 10px">{{order.methodPay}}</span>
                </dd>
                <dd>
                  配送方式:<span class="item-text" style="margin-left: 10px">{{order.distribution}}</span>
                </dd>
                <dd>
                  价格:<span class="item-text" style="margin-left: 10px">￥{{order.allPrice}}元</span>
                </dd>
                <dd>
                  运费:<span class="item-text" style="margin-left: 10px">￥{{order.freight}}元</span>
                </dd>
                <dd>
                  订单金额:<span class="item-text" style="margin-left: 10px">￥{{order.allPrice}}元</span>
                </dd>
                <dd v-show="order.state === '等待付款'">
                  应付金额:<span :class="order.state === '等待付款'?'item-text text-orange':'item-text'"  style="margin-left: 10px">￥{{order.allPrice}}元</span>
                </dd>
              </dl>
            </div>
          </div>
          <div class="show-group-item">
            <div class="item-information">
              <dl style="height: 90px;">
                <dt>收货地址</dt>
                <dd>
                  收货人:<span class="item-text" style="margin-left: 10px">{{address.name}}</span>
                </dd>
                <dd>
                  邮编:<span class="item-text" style="margin-left: 10px">{{address.zipCode}}</span>
                </dd>
                <dd>
                  地址:<span class="item-text" style="margin-left: 10px">{{address.place}}</span>
                </dd>
                <dd>
                  电话:<span class="item-text" style="margin-left: 10px">{{address.phone}}</span>
                </dd>
              </dl>
            </div>
          </div>
        </div>
    </div>
  </div>
  <div class="show-order">
    <div class="show-context">
      <table class="table">
        <thead>
          <tr>
            <th>商品</th>
            <th>名称</th>
            <th>价格</th>
            <th>数量</th>
            <th>小计</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="sp in goods" :key="sp.id">
            <td>
              <a href="#" :title="sp.title">
                <img class="goods-img" :src="sp.pic" :alt="sp.id" >
              </a>
            </td>
            <td>
              <a href="#">{{ sp.title }}</a>
            </td>
            <td>￥{{ sp.price }}</td>
            <td>{{ sp.num }}</td>
            <td>￥{{ sp.price * sp.num}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import {reactive, toRefs} from "vue";

  export default {
    name: "ShowOneOrder",
    setup(){
      let informations = reactive({
        goods:[
          {
            id:'01',
            title:'兰蔻 新塑颜修护凝露水',
            pic:require("@/assets/image/1.jpg"),
            price:200.00,
            num:1,
          },
        ],
        address:{
          name:'hdd',
          place:'浙江省杭州市',
          phone:'12345678901',
          zipCode:'310000',
        },
        order:{
          time:'2021-08-24 02:22:02',
          methodPay:'网上支付',
          distribution:'普通物流',
          freight:18.00,
          allPrice:200.00,
          serialNumber:'2021082410110735',
          state:'已完成',
          message:'尊敬的客户，您的订单完成，祝您购物愉快!'
        }
      })

      function deleteAddress(id){
        if(confirm('您确定要取消订单/退款吗？')){
          console.log('取消订单/退款。',id)
        }
        else{
          console.log('误点删除按键，请返回！')
        }
      }

      return {
        ...toRefs(informations),
        deleteAddress,
      }
    }
  }
</script>

<style scoped>
  *{
    font-size: 13px;
    color: #333;
  }
  a{
    text-decoration: none;
    color: #666666;
  }
  ul,dl,dd{
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .text-orange{
    color: #f56a00 !important;
  }
  .show-order{
    background-color: white;
    margin-bottom: 17px;
  }
  .show-heading{
    padding: 10px 15px;
    border-bottom: 1px solid #f0f0f0;
  }
  .show-context{
    padding: 15px;
    border-bottom: 1px solid #f0f0f0;
  }
  .show-group{
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  .show-group-item{
    position: relative;
    display: block;
    padding: 10px 0;
    background-color: #fff;
  }
  .show-group-item:not(:last-child){
    border-bottom: 1px #ddd solid;
  }
  .item-top{
    padding-top: 0 !important;
  }
  .item-number{
    display: block;
    line-height: 31px;
    vertical-align: middle;
  }
  .goback-button{
    line-height: 31px;
    padding: 0 15px;
    background-color: white;
    border-radius: 4px;
    border: 1px #d8d8d8 solid;
    position: absolute;
    right: 10px;
    bottom: 10px;
  }
  .goback-button:hover{
    color: white;
    background-color: #409EFF;
    border-color: #409EFF;
    cursor: pointer;
  }

  .item-text{
    font-weight: normal;
    padding: 0;
    margin: 0;
    line-height: 30px;
    font-size: 14px;
    color: #919191;
  }
  .show-group-item p{
    padding: 0;
    margin: 0;
  }
  .item-information dl{
    height: 120px;
  }
  .item-information dl dt{
    line-height: 30px;
  }
  .item-information dl dd{
    float: left;
    width: 50%;
    line-height: 30px;
  }
  .table{
    width: 100%;
  }
  .table thead tr th{
    border-bottom: 1px #e0e0e0 solid;
    padding: 12px 8px;
    color: #666666;
    vertical-align: middle;
    text-align: left;
  }
  .table tbody tr td{
    padding: 12px 8px;
    color: #666666;
    vertical-align: middle;
  }
  .goods-img{
    max-width: 60px;
    transition: border-color 0.3s;
    padding: 4px;
    line-height: 1.42857143;
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 4px;
  }
  .table tbody tr td a:hover .goods-img{
    border-color: #ddd;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.08);
  }
  .table tbody tr td a:hover{
    color: #409EFF;
  }
</style>